<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="hnust_LiuXingLong">
  <meta name="Keywords" content="hnust_LiuXingLong">
  <meta name="Description" content="我的个人作业">
  <title>百度换肤</title>
  <link href="favi.ico" rel="shortcut icon" type="image/x-icon" />
	<style type="text/css">
	*{margin:0px; padding:0px;}
	a{
	  color:#fff; margin-top:20px;display:block;
	  margin-left:990px;font-size:13px;cursor:pointer;	
	 }
	body{background:url("images/bg4.jpg") no-repeat top center;}
	.con{
		 width:911px; height:317px;                                          
		 margin:255px auto;	 
		}
	.head{width:100%; height:0px; background:#fff;overflow:hidden;
		  position:fixed;   
		  left:0px;top:0px;
	     }
	.menu{width:100%;height:45px;}				
	.title{
		   width:911px;height:45px;                                         
		   margin:0px auto;                                                  
		  }
	 .p1{width:571px; height:45px; background:url("images/tj.png"); float:left; cursor:pointer; }
	 .p2{width:45px;  height:45px; background:url("images/sq.png"); float:right;cursor:pointer; }
	 .bg{width:911px; height:205px; margin:25px auto;}                     
	 .bgcon{width:590px;  height:190px;  float:left;}					  
	 .bgcon img{ 
				width:97px;height:59px;display:block;float:left;
				margin-right:1px;margin-bottom:1px;
			   }
	 .bgcon .big{width:195px;height:119px;}
	 .bgcon .last{position:relative;top:-60px;}
	 .bgyl{
		   width:264px;height:180px;
		   float:right;background:url("images/bg0.jpg");
		   background-size:264px;
		  }
	</style>
 </head>
 <body>
	<audio autoplay="autopaly">
		<source src="Groove Coverage.mp3" type"audio/mp3"/>
	</audio>
	<a href="#">换肤</a>         
	<div class="con"><img src="images/content.png"></div>  
	<div class="head">
		<div class="menu">
			<div class="title">
				<p class="p1"></p>
				<p class="p2"></p>
			</div>
		</div>
		<div class="bg">
			<div class="bgcon">
				<img class="big" src="images/0.jpg"/>
				<img src="images/1.jpg"/>
				<img src="images/2.jpg"/>
				<img src="images/3.jpg"/>
				<img src="images/4.jpg"/>
				<img src="images/5.jpg"/>
				<img class="big" src="images/6.jpg"/>
				<img src="images/7.jpg"/>
				<img src="images/8.jpg"/>
				<img class="last" src="images/9.jpg"/>
				<img class="last" src="images/10.jpg"/>
				<img class="last" src="images/11.jpg"/>
			</div>
			<div class="bgyl"><img src="images/yl.png"/></div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	    var i=0; 
		$("a").click(function(){
			$(".head").animate({height:"288px"},500);
		})
		$(".p2").click(function(){
			$(".head").animate({height:"0px"},500);
		})
		$(".bgcon img").hover(function(){
			i=$(this).index();
			$(".bgyl").css("background",'url(images/'+i+'.jpg)');
			$(".bgyl").css("backgroound-size","264px 180px");
		})
		$(".bgcon img").click(function(){
			$("body").css("background",'url(images/bg'+i+'.jpg) no-repeat top center');
		})
	</script>
 </body>
</html>